<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrapper {
            width: 1226px;
            margin: 50px auto;
            position: relative;
        }

        .nav {
            display: flex;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .nav li {
            width: 15px;
            height: 15px;
            border: 1px solid #333;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 5px;
        }


        .nav .active {
            background-color: pink;
            color: #fff;
        }

        .zone-list {
            height: 400px;
        }

        .zone-list .zone-item {
            height: 400px;
            text-align: center;
            line-height: 400px;
            display: none;
        }

        .zone-list .show {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="zone-list">
            <div class="zone-item show">01</div>
            <div class="zone-item">02</div>
            <div class="zone-item">03</div>
            <div class="zone-item">04</div>
            <div class="zone-item">05</div>
            <div class="zone-item">06</div>
        </div>
    </div>
</body>
<script>
    var wrapper = document.querySelector(".wrapper");

    var navItems = document.querySelectorAll(".nav li");
    var zoneItems = document.querySelectorAll(".zone-list .zone-item");
    console.log(navItems);

    var index = 0; //全局变量 => 记录轮播的下标
    var timer = null; //全局变量 => 记录轮播的编号

    // 单击时切换
    // 页面加载时 ==> 循环绑定事件
    for (let i = 0; i < navItems.length; i++) {
        let li = navItems[i];

        let zone = zoneItems[i];
        zone.style.backgroundColor = randColor();
        li.onclick = function () {

            index = i; //点击时 记录下标 => 轮播时从当前位置继续向后轮播

            // 先清除所有导航的活跃状态的样式 (点击导航时 遍历清除每个元素的活跃样式)
            for (var j = 0; j < navItems.length; j++) {
                navItems[j].className = "";
                zoneItems[j].classList.remove("show");
            }

            // 当前被点击的元素变为活跃状态
            navItems[i].className = "active"; //只用设置一次class名
            zoneItems[i].classList.add("show");
        }
    }

    // 移入和移出
    // onmouseover  鼠标移入目标元素时触发
    wrapper.onmouseover = function () {
        clearInterval(timer);
    }

    // onmouseout  鼠标移出目标元素时触发
    wrapper.onmouseout = function () {
        // 被清除的计时器无法重新启动 => 在开启新的
        timer = setInterval(function () {
            index++;
            if (index > zoneItems.length - 1) { // 6个盒子 => 最大下标5
                index = 0;
            }

            // 先清除所有导航的活跃状态的样式 (点击导航时 遍历清除每个元素的活跃样式)
            for (var j = 0; j < navItems.length; j++) {
                navItems[j].className = "";
                zoneItems[j].classList.remove("show");
            }

            // 当前被点击的元素变为活跃状态
            navItems[index].className = "active"; //只用设置一次class名
            zoneItems[index].classList.add("show");

        }, 3000);
    }

    // 自动切换  => 每隔3s自动切换下一张  => 下标依次递增
    timer = setInterval(function () {
        index++;
        if (index > zoneItems.length - 1) { // 6个盒子 => 最大下标5
            index = 0;
        }

        // 先清除所有导航的活跃状态的样式 (点击导航时 遍历清除每个元素的活跃样式)
        for (var j = 0; j < navItems.length; j++) {
            navItems[j].className = "";
            zoneItems[j].classList.remove("show");
        }

        // 当前被点击的元素变为活跃状态
        navItems[index].className = "active"; //只用设置一次class名
        zoneItems[index].classList.add("show");

    }, 3000);





    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }





</script>

</html>